<!--  -->
<template>
  <div class="mytodos">
    <!-- 头部标题开始 -->
    <div class="mytodos-header">
      <h1>todos</h1>
    </div>
    <!-- 头部标题结束 -->
    <div class="mytodos-content">
      <!-- 顶部输入框开始 -->
      <div class="mytodos-content-top">
        <div class="top-left" :class="[{rotate:allChecked}]" @click.stop="allChecked">
          <span @click.stop="handleAllChecked">></span>
        </div>
        <div class="top-right">
          <input type="text" placeholder="what are you seeing?" v-model="inputVal" @keydown.enter="getValue" v-focus/>
        </div>
      </div>
      <!-- 顶部输入框结束 -->
      <!-- 内容列表开始 -->
      <div class="mytodos-content-mid">
        <div class="mid-list-item" v-for="(item,index) in filterTodos" :key="item.id">

          <div class="list-item-left">
            <input type="checkbox" v-model="item.status" />
          </div>

          <div class="list-item-mid" :class="[{completed:item.status}]" @dblclick="handleEditIndex(index)">
            <div :class="[{hidden:edit_index===index}]">{{item.text}}</div>
            <input type="text" v-model="item.text" :class="[{hidden:edit_index != index}]" @blur="saveEditIndex">
          </div>

          <div class="list-item-right" @click="closeTodos(index)">X</div>
        </div>
      </div>
      <!-- 内容列表结束 -->
      <div class="mytodos-content-bottom">
        <div class="content-left">
          <span>{{remain}}</span>  item left
        </div>
        <div class="content-mid">
          <div class="mid-left" @click="handleItemClick('all')" :class="[{active:activeTab==='all'}]">all</div>
          <div class="mid-mid" @click="handleItemClick('active')" :class="[{active:activeTab==='active'}]">active</div>
          <div class="mid-right" @click="handleItemClick('completed')" :class="[{active:activeTab==='completed'}]" >completed</div>
        </div>
        <div class="content-right" @click.stop="clearCompleted">
          clear completed
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      activeTab:'all',
      edit_index:-1,
      inputVal:"",
      todos: JSON.parse(localStorage.getItem('todos')||'[]'),
      // [
      //   {
      //     text: "邪帝",
      //     status: false,
      //     id: 1,
      //   },
      //   {
      //     text: "龙神",
      //     status: true,
      //     id: 2,
      //   },
      //   {
      //     text: "炽炎",
      //     statu: false,
      //     id: 3,
      //   },
      // ],
    };
  },
  //监听属性 类似于data概念
  computed: {
    remain:function(){
      let remainTodos = this.todos.filter(v=>{
        if(!v.status){
          return true
        }
      })
      return remainTodos.length
    },
    allChecked:function(){
      let checked = true
      this.todos.map(v=>{
        if(!v.status){
          checked = false
        }
      })
      return checked
    },
    filterTodos:function(){
      if(this.activeTab==='all'){
        return this.todos
      } else if(this.activeTab==='active'){
          return this.todos.filter(v=>{
           return !v.status
          })
        } else if(this.activeTab==='completed'){
          return this.todos.filter(v=>{
            return v.status
          })
        }
    }
  },
  //监控data中的数据变化
  watch: {
    todos:{
      handler:function(newTodos){
        localStorage.setItem('todos',JSON.stringify(newTodos))
      },
      deep:true,
    }
  },
  //方法集合
  methods: {
    getValue:function(){
      if(!this.inputVal){
        alert('输入内容不能为空')
        return false
      }
      this.todos.push({
        text:this.inputVal,
        status:false,
        id:Date.now()
      })
    },
    handleAllChecked:function(){
      let newTodos = JSON.parse(JSON.stringify(this.todos))
      newTodos.forEach(item=>{
        item.status = true
      })
      this.todos = newTodos
    },
    closeTodos:function(index){
      this.todos.splice(index,1)
    },
    handleEditIndex:function(index){
      this.edit_index = index
    },
    saveEditIndex:function(){
      this.edit_index=-1
    },
    handleItemClick:function(activeTab){
      this.activeTab=activeTab
      console.log(this.todos)
    },
    clearCompleted:function(){
      let activeTodos = this.todos.filter(v=>{
        return !v.status
      })
      this.todos = activeTodos
      console.log(this.todos)
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  directives:{
    "focus":{
      inserted:function(el){
        el.focus();
      }
    }
  }
};
</script>
<style lang="less" scoped>
.mytodos {
  width: 50vw;
  margin: 0 auto;

  .mytodos-header {
    height: 50px;
    h1 {
      text-align: center;
      color: red;
      opacity: 0.3;
    }
  }

  .mytodos-content {
    
    border: 1px #999 solid;

    .mytodos-content-top {
      display: flex;
      margin-top: 5px;
      padding: 5px;
      height: 50px;
      .top-left {
        flex: 1;
        height: 50px;
        text-align: center;
        span {
          line-height: 40px;
          text-align: center;
        }
      }

      .top-right {
        flex: 8;
        input {
          width: 100%;
          height: 100%;
        }
      }
    }

    .mytodos-content-mid {
      .mid-list-item:hover > .list-item-right {
        visibility: visible;
      }
      .mid-list-item {
        display: flex;
        height: 50px;
        align-items: center;
        .list-item-left {
          flex: 1;
          display: flex;
          justify-content: center;
          input {
            
          }
        }

        .list-item-mid {
          display: flex;
          flex: 8;
          div {
            
          }
        }

        .list-item-right {
          flex: 1;
          display: flex;
          justify-content: center;
          visibility: hidden;
          cursor: pointer;
        }
      }
    }

    .mytodos-content-bottom {
      height: 40px;
      display: flex;
      justify-content: space-between;
      padding:5px;
      align-items: center;
      .content-left {
        span {
          color: red;
        }
      }

      .content-mid {
        display: flex;
        
        .mid-left {
          margin-left:8px;
          cursor: pointer;
        }

        .mid-mid {
          margin-left:8px;
          cursor: pointer;
        }

        .mid-right {
          margin-left:8px;
          cursor: pointer;
        }
      }

      .content-right {
       cursor: pointer;
      }
    }
  }
}
.rotate{
  transform: rotate(90deg);
  color:red;
}
.hidden{
  display: none;
}
.completed{
  color:#999;
  text-decoration: line-through;
}
.active{
  border:1px solid red;
}
</style>
